<!DOCTYPE html>
<head xmlns:v-bind="http://www.w3.org/1999/xhtml" >
    <meta charset="UTF-8">
    <title>demo10样式绑定-对象的计算模式</title>
  <script src="./js/vue.min.js"></script>

</head>

<body>
   <div id="app">
      <div  class="static" v-bind:class="classObject"></div>
   </div>

</body>
<style>
  .base{
    width:100px;
    height: 100px;
  }
  .active{
    background: green;
  }
  .text-danger{
    background: red;
  }
</style>
<script type="application/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
     isActive: true,
      error:{
       value:true,
        type: 'fatal'
      }
    },
    computed: {
      classObject: function () {
        return {
          base:true,
          active:this.isActive&& this.error.value,
          'text-danger':this.error.value && this.error.type === 'fatal'
        }
      }
    }
  });

</script>
</html>
